<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<style>
.layui-tab-title .layui-this {
	background-color: #009688;
	color: #eee;
}

.first-tab i.layui-tab-close {
	display: none !important;
}

.layui-layout-admin .layui-header {
	background-color: #1aa094 !important;
}

.layui-layout-admin .layui-logo {
	background-color: #0c0c0c !important;
}

.layuimini-color .color-title {
	padding: 10px 0 10px 20px;
	border-bottom: 1px solid #d9dada;
	margin-bottom: 8px;
}

.layuimini-color .color-content {
	padding: 0 5px 0 5px;
}

.layuimini-color .color-content ul {
	list-style: none;
	text-align: center;
}

.layuimini-color .color-content ul li {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 80px;
	height: 50px;
	margin: 0 15px 15px 0;
	padding: 2px 2px 4px 2px;
	background-color: #f2f2f2;
	cursor: pointer;
	font-size: 12px;
	color: #666;
}

.layuimini-color .color-content li.layui-this:after, .layuimini-color .color-content li:hover:after
	{
	width: 100%;
	height: 100%;
	padding: 4px;
	top: -5px;
	left: -5px;
	border-color: #d8d8d8;
	opacity: 1;
}

.layuimini-color .color-content li:after {
	content: '';
	position: absolute;
	z-index: 20;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 0;
	border: 1px solid #f2f2f2;
	transition: all .3s;
	-webkit-transition: all .3s;
	opacity: 0;
}

.layuimini-tool-left {
	position: absolute !important;
	top: 0;
	left: 200px;
	width: 60px;
	height: 100%;
	line-height: 60px;
	text-align: center;
	color: #ffffff !important;
}

.closeBox {
	height: 35px !important;
}

.closeBox>li {
	line-height: 35px !important;
}

.closeBox {
	position: absolute;
	right: -10px;
	top: 16px;
	background-color: #fff !important;
	color: #000;
	border-bottom: 1px solid #e2e2e2;
	padding: 0 10px !important;
}

.closeBox .layui-nav-item {
	line-height: 40px;
}

.closeBox .layui-nav-item>a, .closeBox .layui-nav-item>a:hover {
	color: #000;
}

.closeBox .layui-nav-child {
	top: 40px;
}

</style>
<style id="layuimini-bg-color">
</style>
</head>
<!--参考 layui 后台布局-->
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo" style="font-size: 14px;">视频智能分析及数据管理平台</div>

			<a>
				<div class="layuimini-tool-left" onclick="iconHide()">
					<i class="icon-color layui-icon layui-icon-shrink-right"
						style="color: white" id="hide"></i>
				</div>
			</a>

			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item" lay-unselect><a href="javascript:;"
					data-refresh="刷新"><i class="layui-icon layui-icon-refresh"></i></a>
				</li>
				<li class="layui-nav-item " lay-unselect><a href="javascript:;"
					data-check-screen="full"><i
						class="layui-icon layui-icon-screen-full"></i></a></li>
				<li class="layui-nav-item"><a href="javascript:;">
						<div>
							<span id="deptName"></span> <input id="deptId" hidden></input> <span
								id="nickName"></span>
						</div>
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="javascript:;" data-id="userProper" data-title="基本资料"
								data-url="/index/users/info" class="menuNvaBar">基本资料</a>
						</dd>
						<dd>
							<a href="javascript:;" data-id="userSafe" data-title="安全设置"
								data-url="/index/users/password" class="menuNvaBar">更换密码</a>
						</dd>
						<dd>
							<a href="javascript:;" id="logout">退出</a>
						</dd>
					</dl></li>
				<li
					class="layui-nav-item layuimini-select-bgcolor mobile layui-hide-xs"
					lay-unselect><a href="javascript:;" data-bgcolor="配色方案"><i
						class="layui-icon layui-icon-more-vertical"></i></a></li>
			</ul>
		</div>
		<!-- 左侧菜单-->
		<div id="mainmenu" class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<div class="navBar layui-side-scroll" id="navBarId"></div>
			</div>
		</div>
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div class="layui-tab" lay-filter="tab" lay-allowclose="true">
				<ul class="layui-tab-title" style="width: 90%">
					<li class="first-tab layui-this"><i
						class="layui-icon layui-icon-home"></i> <span>主页</span></li>
				</ul>
				<ul class="layui-nav closeBox">
					<li class="layui-nav-item"><a href="javascript:;"> <i
							class="layui-icon layui-icon-circle-dot"></i> 页面操作
					</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;" data-page-close="other"><i
									class="layui-icon layui-icon-close"></i> 关闭其他</a>
							</dd>
							<dd>
								<a href="javascript:;" data-page-close="all"><i
									class="layui-icon layui-icon-close-fill"></i> 关闭全部</a>
							</dd>
						</dl></li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<iframe th:src="@{/index/main}" frameborder="0" name="content"
							width="100%" id="home"></iframe>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/home.js?v=0.1"></script>
<script>
	var layer = layui.layer;
	var $ = jQuery = layui.jquery;
	var form = layui.form;
	var element = layui.element;
	initBgColor();
	$(function() {
		FrameWH();
		//递归获取导航栏无线层级
		var getChild = function(item, ulHtml) {
			ulHtml += '<dl class="layui-nav-child">';
			$
					.each(
							item,
							function(index, child) {
								if (child.children != null
										&& child.children.length > 0
										&& child.type == 1) {
									ulHtml += '<dd><a>' + child.title + '</a>';
									ulHtml += getChild(child.children, "");
								} else if (child.children != null
										&& child.children.length > 0
										&& child.type != 1) {
									ulHtml += '<a>' + child.title + '</a>';
									ulHtml += getChild(child.children, "");
								} else {
									if (child.target == "_blank") {
										ulHtml += '<dd><a href="' + child.url + '" target="_blank">';
									} else {
										ulHtml += '<dd><a href="javascript:;" data-icon="' + child.icon + '" data-url="' + child.url + '" data-title="' + child.title + '" data-id="' + child.id + '" class="menuNvaBar">';
									}
									ulHtml += '<cite>' + child.title
											+ '</cite></a></dd>';
								}
								if (child.children != null
										&& child.children.length > 0
										&& child.type == 1) {
									ulHtml += '</dd>';
								}

							});
			ulHtml += "</dl>"
			return ulHtml;
		};
		CoreUtil
				.sendGet(
						"/sys/home/",
						null,
						function(res) {
							$("#deptName").html(
									res.data.userInfo.deptName + "-");
							$("#deptId").val(res.data.userInfo.deptId);
							$("#nickName").html(res.data.userInfo.nickName);
							var data = res.data.menus;
							if (data != "" && data.length > 0) {
								var ulHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav" onclick="ulHide()">';
								if (data != null && data.length > 0) {

									$
											.each(
													data,
													function(index, item) {
														if (index == 0) {
															ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
														} else {
															ulHtml += '<li class="layui-nav-item">';
														}
														ulHtml += '<a href="javascript:;">';
														if (!CoreUtil
																.isEmpty(item.icon)) {
															ulHtml += '<i class="layui-icon '+item.icon+'"></i>';
														}
														ulHtml += '<cite> '
																+ item.title
																+ '</cite>';
														ulHtml += '</a>'
														if (item.children != null
																&& item.children.length > 0) {
															ulHtml += '<dl class="layui-nav-child">';
															$
																	.each(
																			item.children,
																			function(
																					index,
																					child) {
																				if (child.children != null
																						&& child.children.length > 0
																						&& child.type == 1) {
																					ulHtml += '<dd><a>'
																							+ child.title
																							+ '</a>';
																					ulHtml += getChild(
																							child.children,
																							"");
																				} else if (child.children != null
																						&& child.children.length > 0
																						&& child.type != 1) {
																					ulHtml += '<a>'
																							+ child.title
																							+ '</a>';
																					ulHtml += getChild(
																							child.children,
																							"");
																				} else {
																					if (child.target == "_blank") {
																						ulHtml += '<dd><a href="' + child.url + '" target="_blank">';
																					} else {
																						ulHtml += '<dd><a href="javascript:;" data-icon="' + child.icon + '" data-url="' + child.url + '" data-title="' + child.title + '" data-id="' + child.id + '" class="menuNvaBar">';
																					}
																					if (!CoreUtil
																							.isEmpty(child.icon)) {
																						ulHtml += '<i class="layui-icon '+child.icon+'"></i>';
																					}
																					ulHtml += '<cite> '
																							+ child.title
																							+ '</cite></a></dd>';
																				}

																				if (child.children != null
																						&& child.children.length > 0
																						&& child.type == 1) {
																					ulHtml += '</dd>';
																				}

																			});
															ulHtml += "</dl>"
														}
														ulHtml += '</li>'
													});
								}
								ulHtml += '</ul>';
								$(".navBar").append(ulHtml);
								element.init(); //初始化页面元素

							} else {
								$("#navBarId").empty();
							}

							top.layer.closeAll();
						});
		$(document)
				.on(
						'click',
						'.menuNvaBar',
						function() {
							var dataid = $(this);
							if ($(".layui-tab-title li[lay-id]").length <= 0) {
								if (CoreUtil.isEmpty(dataid.attr("data-icon"))) {
									var title = "<span>"
											+ dataid.attr("data-title")
											+ "</span>";
									active.tabAdd(dataid.attr("data-url"),
											dataid.attr("data-id"), title);
								} else {
									var title = "<span>"
											+ dataid.attr("data-title")
											+ "</span>";
									title = '<i class="layui-icon '
											+ dataid.attr("data-icon")
											+ '"></i> ' + title;
									active.tabAdd(dataid.attr("data-url"),
											dataid.attr("data-id"), title);
								}
							} else {
								var isData = false;
								$
										.each(
												$(".layui-tab-title li[lay-id]"),
												function() {
													if ($(this).attr("lay-id") == dataid
															.attr("data-id")) {
														isData = true;
													}
												})
								if (isData == false) {
									if (CoreUtil.isEmpty(dataid
											.attr("data-icon"))) {
										var title = "<span>"
												+ dataid.attr("data-title")
												+ "</span>";
										active.tabAdd(dataid.attr("data-url"),
												dataid.attr("data-id"), title);
									} else {
										var title = "<span>"
												+ dataid.attr("data-title")
												+ "</span>";
										title = '<i class="layui-icon '
												+ dataid.attr("data-icon")
												+ '"></i> ' + title;
										active.tabAdd(dataid.attr("data-url"),
												dataid.attr("data-id"), title);
									}
								}
							}
							active.tabChange(dataid.attr("data-id"));
						});

		//推出登录
		$("#logout").click(function() {
			logoutDialog();
		});
	});
	//删除前确认对话框
	var logoutDialog = function() {
		layer.open({
			content : '确定要退出登录么？',
			yes : function(index, layero) {
				layer.close(index); //如果设定了yes回调，需进行手工关闭
				CoreUtil.sendGet("/sys/user/logout", null, function(res) {
					layui.data('LocalData', null);
					top.window.location.href = "/index/login";
				});
			}
		});
	}
	//触发事件
	var active = {
		tabAdd : function(url, id, title) {
			if (url != "" && url != null && url != undefined) {
				element
						.tabAdd(
								'tab',
								{
									title : title,
									content : '<iframe data-frameid="'
											+ id
											+ '" frameborder="0" name="content" width="100%" src="'
											+ url + '"></iframe>',
									id : id
								})
			}
			FrameWH();//计算框架高度
		},
		tabChange : function(id) {
			//切换到指定Tab项
			element.tabChange('tab', id); //切换到：用户管理
			$("iframe[data-frameid='" + id + "']").attr("src",
					$("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
		},
		tabDelete : function(id) {
			element.tabDelete("tab", id);//删除
		}
	};

	function FrameWH() {
		var h = $(window).height() - 41 - 10 - 35 - 10 - 44 - 10;
		$("iframe").css("height", h + "px");
	};
</script>

</html>